<template>
    <view class="wrap">
        <!-- <view class="header">
            :style="{height: navHeight+'px',paddingTop: statusBarHeight+'px'}"
            <view class="nav">
                <view class="nav_text">金考典题库管理</view>
            </view>
        </view> -->
        <NavBar title="督学二级分类" :isBack="true" :titleColor="'#ffffff'" :titlePosition="'left'" :fontSize="'48rpx'"></NavBar>
        <view class="header">
            <!-- <input class="top_input" type="text" placeholder="请输入搜索关键字"> -->
            <u--input
                class="customClass"
                placeholder="前置图标"
                prefixIcon="search"
                shape="circle"
                fontSize="28rpx"
                prefixIconStyle="font-size: 42rpx;color: #ffffff"
                placeholderStyle="color: #ffffff"
                customStyle="border: 2rpx solid #fff"
            ></u--input>
        </view>

        <view class="class_list">
            <div class="class_item" v-for="item in 10">
                <div class="item_top dis_flex al_center just_sb">
                    <div class="top_title">督学名称班级01</div>
                    <div class="top_button">进入班级</div>
                </div>
                <div class="item_bottom">2024-06-17 13:33  到期</div>
            </div>
        </view>

        <PopWindow/>
    </view>
</template>

<script>
import PopWindow from '@/components/PopWindow'
export default {
    data () {
        return {
            
        }
    },
    onLoad () {

    },
    methods: {
    },
    components: {
        PopWindow
    }
}
</script>

<style lang="scss" scoped>
.wrap {
	width: 100%;
	min-height: 100vh;
	overflow-x: hidden;
}

.header {
	width: 100%;
	height: 286rpx;
	padding: 126rpx 36rpx 0;
	box-sizing: border-box;
	background: linear-gradient(298deg, #5E637E 0%, #79829A 100%);
	background-image: url("@/static/img/blue_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 0rpx;
	.top_input {
		color: #FFFFFF;
		font-size: 28rpx;
	}
	/deep/.u-border {
		border: 2rpx solid #fff!important;
	}
}

.class_list {
	width: 100%;
	height: 330rpx;
	background: linear-gradient(180deg, #DFEDFD 0%, #FFFFFF 100%);
	border-radius: 32rpx;
	padding: 46rpx 36rpx;
	box-sizing: border-box;
	margin-top: -36rpx;
	.class_item {
		width: 100%;
		padding-bottom: 108rpx;
		.item_top {
			width: 100%;
			.top_title {
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}
			.top_button {
				width: 156rpx;
				height: 58rpx;
				line-height: 58rpx;
				text-align: center;
				background: linear-gradient(180deg, #1946F9 0%, #0F67FF 100%);
				border-radius: 8rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
		.item_bottom {
			padding-top: 20rpx;
			font-weight: 500;
			font-size: 26rpx;
			color: #A47812;
		}
	}
}
</style>